<template>
    <div>
        <video  style="width:100%;height:auto;" id="monitorPlayer"
            class="video-js vjs-default-skin vjs-big-play-centered " data-setup="{}" controls muted autoplay="true"
            preload="../assets/images/play.png">
            <source :src='url' type="application/x-mpegURL" />
        </video>
    </div>
</template>

<script>
import videojs from 'video.js';
export default {
    props:{
        url:{
            type:String,
            default: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
        },
        // width:{
        //     type:'String',
        //     default: '100%'
        // }
    },
    methods(){
        videojs('monitorPlayer').play();
    },
    beforeDestroy(){
        videojs('monitorPlayer').pause();
        videojs('monitorPlayer').dispose();
    }
};
</script>

<style>
</style>